簡介

實務上開發專案的時候會設定各種環境，像是分成開發、測試、準測試、正式等...依照需求去設定。
Angular CLI 提供了很方便的機制處理環境變數問題，讓我們切換不同環境時不用改 code，只要在 build 時使用不同的參數切換即可。

Angular 15 以上，透過 ng new 建立的專案沒有 environment.ts 環境變數檔與相關設定。

設定環境部屬

建立環境變數檔: DEV(開發環境) ,UAT(測試環境), PROD(正式環境)

1. 資料夾設定為以下結構：src/environments
   
2. 設定 DEV(開發環境) 檔案：src/environments/environment.ts

   export const environment = {
     production: false,
     name: "開發"
   };
   

3. 設定 UAT(測試環境) 檔案：src/environments/environment.uat.ts

   export const environment = {
     production: false,
     name: "測試"
   };
   

4. 設定 PROD(正式環境) 檔案：src/environments/environment.prod.ts

   export const environment = {
     production: true,
     name: "正式"
   };
   

只有 PROD(正式環境) 設定了 production: true，目的是去壓縮 .js .ts .css .scss，最後的檔案會比較小，不過不容易 Debug。
而 name: "正式" 是自訂的 property，可以依照自身專案需求去新增。

調整 angular.json 設定檔

新增 fileReplacements 那塊的設定值

{ 
  "projects": {
    "<專案名稱>": {
      "architect": {
        "build": {
          configuration: {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
            },
            "uat": {
             "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.uat.ts"
                }
              ],
            },
            "development": {
              ...
            }
          }
        }
      }
    }
  }
}

調整 npm 指令: package.json

這邊依個人使用需求去調整。
Angular CLI 內建未加任何參數的指令，預設會跑 DEV(開發環境)。

{
  "scripts": {
    "start": "ng serve",
    "startUat": "ng serve --environment=uat",
    "startProd": "ng serve --environment=production",
    "build": "ng build",
    "buildUat": "ng build --configuration=uat",
    "buildProd": "ng build --configuration=production",
    "buildAll": "npm run buildUat & npm run buildProd",
  }
}

範例: 使用環境變數

// XXX.component.ts
import { environment } from 'src/environments/environment';
...
export class XXXComponent {
  envName: string = environment.name; 
}

<!--XXX.component.html-->
{{envName}}

其他

官方文件
Angular CLI 15.1 後，下面這個指令可以快速設定環境、及建立環境變數檔案。

ng generate environments

資料來源

如何在 Angular 16 加入 environments.ts 環境變數支援 | The Will Will Web
如何設定 Angular 環境變數 ? | 點燈坊